<template>
  <div class="other-component">
    <div class="component-header">
      <h3>其他功能</h3>
    </div>
    <div class="component-content">
      <div class="feature-item">
        <i class="el-icon-document"></i>
        <span>文档中心</span>
      </div>
      <div class="feature-item">
        <i class="el-icon-question"></i>
        <span>常见问题</span>
      </div>
      <div class="feature-item">
        <i class="el-icon-phone"></i>
        <span>联系我们</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Other',
  data() {
    return {
      // 组件数据
    }
  },
  methods: {
    // 组件方法
  }
}
</script>

<style scoped>
.other-component {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.component-header h3 {
  margin: 0 0 12px 0;
  color: #333;
  font-size: 16px;
}

.component-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.feature-item:hover {
  background-color: #f5f5f5;
}

.feature-item i {
  margin-right: 8px;
  color: #666;
}

.feature-item span {
  color: #333;
  font-size: 14px;
}
</style>
